<template>
  <div>
    <header class="header-style">
      <a-input-search v-model="queryParam.projectName" placeholder="搜索项目名称" enter-button
        @search="initData(queryParam)" />
    </header>
    <div id="gcMap" class="map"></div>
    <info-modal :actionType="action" ref="infomodal"></info-modal>

  </div>
</template>
<script>
import { GetMapList as getProjectList, getProjectExById, getProjectById } from '@/api/project'
import InfoModal from './modules/infomodal'

let T = window.T
export default {
  components: { InfoModal },
  data() {
    return {
      T,
      Map: null,
      queryParam: {
        isExamine: true,
        index: 1,
        pageSize: 50
      },
      action: 'add',
      markerIcon: require('@/assets/marker-icon.png'),
    }
  },
  mounted () {
    if (this.T) {
      const map = new T.Map('gcMap')
      const lnglat = new T.LngLat(120.353570, 31.603670)
      map.centerAndZoom(lnglat, 12)
      this.Map = map
      this.initData(this.queryParam)
    } else {
      this.$message.error('地图加载失败！')
    }
  },
  methods: {
    initData (data) {
      this.spinning = true
      this.Map.clearOverLays()
      getProjectList(data)
        .then(res => {
          const data = res.data
          data.forEach(d => {
            const icon = new this.T.Icon({
                iconUrl: d.LightColor != null ? this.getMarkerIcon(d.LightColor) : this.getMarkerIcon('green'), // this.markerIcon,
                iconSize: new T.Point(19, 27),
                iconAnchor: new T.Point(10, 25)
            });
            const point = new this.T.LngLat(d.examineLng, d.examineLat)
            const marker = new this.T.Marker(point, { icon: icon, ...d })
            this.Map.addOverLay(marker)
            marker.addEventListener('click', this.click)

            const markerInfoWin = new this.T.InfoWindow(d.projectName)
            marker.addEventListener('mouseover', function () {
              marker.openInfoWindow(markerInfoWin)
            })
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    /**
     * 覆盖物点击事件
     * @param {*} data
     */
    click(data) {
      this.spinning = true
      this.action = 'view'

      getProjectExById({ id: data.target.options.id })
        .then(res => {
          this.$refs.infomodal.view(res.data)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    getMarkerIcon(color) {
      const icon = require(`@/assets/marker-${color}.png`)
      return icon
    }
  }
}
</script>
<style>
.header-style {
  position: absolute;
  top: 60px;
  z-index: 1000;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>